<template>
	<div class="mobile">
		<div class="mHeader">
			<div class="mhBack" @click="goList">
				<i class="mhBackIco"></i>
			</div>
			<h3 class="mhTitle">产品详情</h3>
			<div class="mhShare"></div>
		</div>
		<div class="mMain">
			<div class="bannerIng">
				<img v-if="goodDetail && goodDetail.goodsPics && goodDetail.goodsPics.length > 0 && goodDetail.goodsPics[0].picUrl" :src="goodDetail.goodsPics[0].picUrl" alt="">
				<img v-else src="./images/proDetail.png" alt="">
			</div>
			<div class="mdescribe">
				<div class="mdTitle">
					{{goodDetail.name}}
				</div>
				<div class="mdCue">
					<span v-if="goodDetail.tag" v-for="tag in goodDetail.tag.split(',')">
						{{tag | tagMapping}}
					</span>
				</div>
				<div class="mdPrice" v-show="currentItem && currentItem.specPrice">¥{{currentItem.specPrice}}</div>
				<div class="mdPrice" v-show="!currentItem || !currentItem.specPrice">¥{{goodDetail.minPrice ? goodDetail.minPrice : 0}}-¥{{goodDetail.maxPrice ? goodDetail.maxPrice : goodDetail.minPrice}}</div>
				<div class="mdDetail">
					{{goodDetail.intro}}
				</div>
			</div>
			<div class="mColor" @click="itemShow = true">
				<div class="mcTxt">选择：
					<span :style="{color: currentItem.specName ? '#8f8f8f' : ''}"> {{currentItem.specName ? currentItem.specName : '颜色版本'}}</span>
				</div>
				<!-- 选择好型号之后"选择："的颜色变灰 #8f8f8f(mcTxt) -->
				<div class="mcIco" ></div>
			</div>
			<div class="mdetail">
				<img v-for="item in goodDetail.detailPics" :src="item.picUrl" />
			</div>
		</div>
		<div class="mFooter">
			<div class="mfLeft" v-if="currentItem.specPayment && currentItem.specPayment">
				月供: <span>{{currentItem.specPayment}}</span> 元起
			</div>
			<div class="mfLeft" v-else-if="goodDetail.payment">
				月供: <span>{{goodDetail.payment}}</span> 元起
			</div>
			<div class="mfSer" @click="preview">
				<i class="mfSerIco"></i>
				<span>客服</span>
			</div>
			<div class="mfBtn" @click="preview">
				<button type="button">到店看看</button>
			</div>
		</div>
		<!-- 点击选择颜色版本弹层 -->
		<div class="mShadow" v-show="itemShow"></div>
		<div class="mChoice" v-show="itemShow">
			<div class="mcTop">
				<div class="closeMc" @click="itemShow = false"></div>
				<div class="mcIn">
					<div class="mcPrice">¥<span>{{currentItem.specPrice ? currentItem.specPrice : '0'}}</span></div>
					<div class="mcGoods">已选：<span>{{currentItem.specName ? currentItem.specName : '未选择'}}</span></div>
				</div>
				<div class="mcType">
					<h4>商品型号</h4>
					<div class="mcTypeDetail">
						<span :class="[currentItem.id === item.id ? 'mcAct' : '']" v-for="(item, index) in goodDetail.specList" @click="currentItem = item">
							{{item.specName}}
						</span>
					</div>
				</div>
			</div>
			<div class="mcBtn" @click="itemShow = false">
				<button type="button">完成</button>
			</div>
		</div>
	</div>
</template>

<script type="javascript/ecmascript6">
import {mapState} from 'vuex'
import fetch from '@/fetch'

export default{
  name: 'mgoodsdetailcomponent',
  data () {
  	return {
  	  currentItem: {},
  	  goodDetail: {
  	  	tag: ''
  	  },
  	  itemShow: false
  	}
  },
  methods: {
  	goList () {
  	  this.$emit('updateView', 'goods')
  	},
  	preview () {
  	  this.$noty.warning('预览模式下不支持此功能!')
  	},
  	getGoodDetail () {
  	  let params = {
  	  	goodsId: this.currentGoodId
  	  }
  	  fetch.send('/merchant/xcx/getGoodsDetail', params).then(res => {
  	  	if (res.respCode === '000000') {
  	  	  this.goodDetail = res.result.data
  	  	} else {
  	  	  this.$noty.error(res.respDesc ? res.respDesc : '获取商品详情失败')
  	  	}
  	  })
  	}
  },
  filters: {
  	tagMapping (tag) {
  	  let text = ''
  	  switch (tag) {
  	  	case '1': 
  	  	  text = '可分期'
  	  	  break
  	  	case '2': 
  	  	  text = '0首付'
  	  	  break
  	  	case '3': 
  	  	  text = '免息分期'
  	  	  break
  	  	case '4': 
  	  	  text = '携带银行卡+身份证'
  	  	  break
  	  }
  	  return text
  	}
  },
  computed: {
    ...mapState([
	  'currentGoodId'
    ])
  },
  created () {
	this.getGoodDetail()
  }
}
</script>
<style type="text/css" scoped>
	.mobile{
		border: none;
		height: 100%;
		width: 100%;
		overflow: hidden;
		line-height: 1;
	}
	.mHeader{
		display: flex;
		height: 42px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background: #fff;
		border-bottom: 1px solid #dedede;
	}
	.mhBack{
		width: 12px;
		padding: 0 15px;
		display: flex;
		align-items: center;
	}
	.mhBackIco{
		display: block;
		vertical-align: middle;
		width: 12px;
		height: 12px;
		border-left: 1px solid #757575;
		border-bottom: 1px solid #757575;
		transform: rotate(45deg);
	}
	.mhTitle{
		flex: 1;
		color: #000;
		font-size: 15px;
		line-height: 42px;
		text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.mhShare{
		display: block;
		width: 12px;
		padding: 0 15px;
		display: flex;
		align-items: center;
	}
	.mMain{
		width: 100%;
		height: 100%;
		overflow: scroll;
		padding: 44px 0 56px;
		position: relative;
		text-align: left;
	}
	.bannerIng img{
		height: 375px;
	}
	.mdescribe{
		padding: 15px 15px 5px;
		background: #fff;
		color: #8f8f8f;
		font-size: 14px;
		line-height: 26px;
	}
	.mdTitle{
		line-height: 24px;
		color: #333;
		font-size: 16px;/* 
		overflow: hidden;
		text-overflow: ellipsis;
		word-break:keep-all;
		white-space:nowrap; */
	}
	.mdCue span{
		display: inline-block;
		border: 0.5px solid #FFA230;
		border-radius: 2px;
		font-size: 12px;
		line-height: 14px;
		color: #FFA230;
		padding: 1px 5px;
		margin: 5px 5px 0 0;
	}
	.mdPrice{
		color: #f54d4f;
		font-size: 22px;
		line-height: 36px;
	}
	.mColor{
		display: flex;
		flex: 1 auto;
		margin: 10px 0;
		background: #fff;
		height: 26px;
		line-height: 26px;
		padding: 20px 15px;
		align-items: center;
	}
	.mcTxt{
		flex: 1;
		color: #333;
		font-size: 14px;
	}
	.mcTxt span{
		color: #333;
		font-size: 18px;
	}
	.mcIco{
		width: 12px;
		height: 12px;
		border-right: 1px solid #757575;
		border-top: 1px solid #757575;
		transform: rotate(45deg);
	}
	.mdetail{
		margin-bottom: 100px;
	}
	.mdetail img{
		width: 100%;
		margin-bottom: 5px;
		display: block;
	}
	.mFooter{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		display: flex;
		height: 56px;
		background: #fff;
		box-shadow: 0 -1px 5px 0px rgba(51,51,51,.15);
	}
	.mfLeft{
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #8f8f8f;
		line-height: 56px;
	}
	.mfLeft span{
		color: #333;
		font-size: 18px;
		font-weight: 600;
	}
	.mfSer{
		flex: 0.5;
		background: url('images/serviceBg.png') no-repeat;
		background-size: cover;
		color: #fff;
		font-size: 14px;
		letter-spacing: 1px;
	}
	.mfSer i{
		display: block;
		width: 100%;
		height: 35px;
		background: url('images/serviceIco.png') center  no-repeat;
		background-size: 28px 23px;
	}
	.mfBtn{
		flex: 1;
	}
	.mfBtn button{
		width: 100%;
		border: none;
		background: #f54d4f;
		color: #fff;
		font-size: 18px;
		line-height: 56px;
		letter-spacing: 1px;
		outline: none;
	}
	.mShadow{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, .3);
		z-index: 99999;
	}
	.mChoice{
		width: 100%;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999999;
	}
	.mcTop{
		padding: 25px 15px;
		background: #fff;
		text-align: left;
		position: relative;
	}
	.closeMc{
		width: 24px;
		height: 24px;
		background: url('images/closemc.png') center center no-repeat;
		background-size: 16px 16px;
		position: absolute;
		right: 10px;
		top: 5px;
	}
	.mcIn{
		color: #8f8f8f;
		font-size: 14px;
		line-height: 22px;
		padding-bottom: 20px;
	}
	.mcPrice{
		color: #f54d4f;
	}
	.mcPrice span{
		font-size: 22px;
		font-weight: 600;
		line-height: 26px;
	}
	.mcType{
		max-height: 300px;
		overflow-y: auto;
	}
	.mcType h4{
		color: #8f8f8f;
		font-size: 14px;
		line-height: 24px;
		margin-bottom: 15px
	}
	.mcType span{
		display: inline-block;
		color: #333;
		font-size: 14px;
		line-height: 24px;
		border: 1px solid #8f8f8f;
		border-radius: 4px;
		padding: 0 5px;
		margin: 0 10px 15px 0;
	}
	.mcType span.mcAct{
		color: #f54d4f;
		border-color: #f54d4f;
	}
	.mcBtn button{
		width: 100%;
		height: 56px;
		line-height: 56px;
		background: #f54d4f;
		color: #fff;
		border: none;
		outline: none;
		font-size: 18px;
		letter-spacing: 2px;
	}
</style>